<!DOCTYPE html>
<html>
<head>
	<title>所有相片</title>
<link rel="stylesheet" href="__ROOT__/static/css/amazeui.min.css">
<script typet="text/javascript" src="__ROOT__/static/js/jquery-3.1.1.min.js"></script>
<script typet="text/javascript" src="__ROOT__/static/js/amazeui.min.js"></script>
</head>
<body>
<table border="2">
<tr><th>1</th><th>2</th><th>3</th><th>4</th></tr>

	<tr>
	{volist name='photo_list' id='vo' mod='4'}
	<td><img src="__ROOT__/static/upload_img/{$vo.file_name}" style="width: 300px;height: 400px"><br><br><a  onclick="image_info('{$vo.file_name}')" class="am-btn am-btn-primary" data-am-modal="{target: '#my-alert3'}" href="javascript:return 0;" >此相片信息</a>&nbsp;
	<a href="javascript:return 0;"  class="am-btn am-btn-primary ajax_test" data-am-modal="{target: '#my-alert1'}" onclick="img_test('{$vo.file_name}')">识别此相片</a><br><br></td>{eq name="mod" value="3"}</tr>
	<tr>{/eq}{/volist}

	</tr>
</table>


<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">图片信息</div>
    <div class="am-modal-bd" id="img_info">
      
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">确定</span>
    </div>
  </div>
</div>

<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert2">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">识别结果</div>
    <div class="am-modal-bd1" id="img_test">
      
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">确定</span>
    </div>
  </div>
</div>

<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-alert1">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">正在识别，请稍后...</div>
    <div class="am-modal-bd2">
      <span class="am-icon-spinner am-icon-spin"></span>
    </div>
  </div>
</div>

<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-alert3">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">正在获取图片信息...</div>
    <div class="am-modal-bd2">
      <span class="am-icon-spinner am-icon-spin"></span>
    </div>
  </div>
</div>



</body>
<script type="text/javascript">
	function image_info(file_name){
		$('.am-modal-bd').empty();
		var $modal = $('#my-alert3');
		var $modal1 = $('#my-alert');
		// 图片地址 后面加时间戳是为了避免缓存
		var img_url = "__ROOT__/static/upload_img/"+file_name+'?'+Date.parse(new Date());
		// 创建对象
		var img = new Image();
		// 改变图片的src
		img.src = img_url;
		img.onload = function(){
		$.ajax({
			url:"photoInfo",
			type:"post",
			dataType:"json",
			data:{
				'file_name':file_name,
			},
			success:function(data){
				if(data.code!='0'){
					$modal.modal('close');
					alert(data.msg);
				}else{
					$('.am-modal-bd').append("图片宽度："+img.width+
		 					 "px<br>图片高度："+img.height+
		 					 "px<br>上传者："+data.data.username+
		 					 "<br>上传时间："+data.data.create_time
		 					 );
					$modal.modal('close');
					$modal1.modal('open');
				}
				
		},
		error:function(data){
			alert("发生了一个预期之外的错误！");
		}
			});
		


		};
		
	}
</script>
<script type="text/javascript">
	function img_test(file_name){
		$('.am-modal-bd1').empty();
		 var $modal = $('#my-alert1');
		 var $modal1 = $('#my-alert2');
		$.ajax({
			url:"jsonTest",
			type:"post",
			dataType:"json",
			data:{
				'file_name':file_name,
			},
			success:function(data){
				if(data.code!='0'){
					$modal.modal('close');
					$modal1.modal('open');
					$('.am-modal-bd1').append(data.msg);
					//alert(data.msg);
				}else{
					$('.am-modal-bd1').append("人脸类型："+data.data.human+
										"<br>人种："+data.data.race+
										"<br>人脸数目："+data.data.result_num+
										"<br>性别："+data.data.gender+
										"<br>年龄："+data.data.age+
										"<br>美丑打分："+data.data.score+"("+data.data.beauty+")"+
										"<br>人脸置信度："+data.data.face_probability+
										"<br>表情："+data.data.expression+
										"<br>是否戴眼镜："+data.data.glasses);
					$modal.modal('close');
					$modal1.modal('open');
				}
		},
		error:function(data){
			alert("发生了一个预期之外的错误！");
		}
			});
	}
</script>
</html>

<!-- <button
  type="button"
  class="am-btn am-btn-success"
  data-am-modal="{target: '#my-modal-loading'}">
  Modal Loading
</button>

<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">正在载入...</div>
    <div class="am-modal-bd">
      <span class="am-icon-spinner am-icon-spin"></span>
    </div>
  </div>
</div> -->